<template>
	<div class="store-wrap">
    <div v-title style="display: none">门店地址</div>
    <div class="Areas" v-show="areaItem">
		  <div class="ComboBox">
        <span class="store-icon"></span>
        <span class="area" id="area" @click="selectup">{{ area }}</span>
        <span class="down" @click="selectup"></span>
		  </div>

      <div class="area-item">
        <ul @click="selectup">
          <span>
          <li>
            <input class="inputa" id="areas" type="radio" name="area" checked="true">
            <label for="areas" @click="chooseArea('全部区域')">全部区域</label>
          </li>
          </span>
          <span v-for="(item,index) in keyslist">
          <li class="border-none" v-if="(index % 2)==0" >
            <input class="inputa" :id="index" type="radio" name="area" :value="item">
            <label :for="index" @click="chooseArea(item)">{{ item + '区'}}</label>
          </li>
          <li v-else>
            <input class="inputa" :id="index" type="radio" name="area" :value="item">
            <label :for="index" @click="chooseArea(item)">{{ item + '区'}}</label>
          </li>
          </span>
        </ul>
      </div>
    </div>
    <div class="cover" v-show="cover" @click="selectup"></div>
    
    <div class="ComboBox-content">
    <div class="ComboBox" v-show="itemNone">
      <span class="store-icon"></span>
      <span class="area" id="area" @click="selectdown">{{ area }}</span>
      <span class="down" @click="selectdown"></span>
    </div>
    </div>
    <div class="clearfix"></div>

    <div id="stores" v-for="(item,index) in storelist">
    <div class="store-img" :id=item.id @click="getStoredetail(item.id)">
      <img :src="'http://cj.lightway.cc/media/'+item.imgurl"/>
      <div class="store-address">
         <div class="span-add">{{  item.ads }}</div>
         <div class="span-area">{{ item.name }}</div>
      </div>    
    </div>
    </div>

	</div>
</template>
<script type="text/ecmascript-6">
const ERR_OK = 1;
  export default {
    props: {
    },
    data() {
      return {
        cover: null,
        areaItem: null,
        itemNone: 'true',
        storelist: [],
        keyslist: [],
        area: '全部区域',
        hash: '',
        datas: []
      };
    },
    created() {
      this.$http.get('api/school/store/list/?school_id=' + 1).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          let stores = response.data;
          this.datas = stores;
          for (let i in stores) {
            this.keyslist.push(i);
            for (let j in stores[i]) {
              this.storelist.push(stores[i][j]);
            }
          }
        }
      });
    },
    methods: {
      selectdown() {
        this.cover = 'true';
        this.areaItem = 'true';
        this.itemNone = '';
      },
      selectup() {
        this.cover = '';
        this.areaItem = '';
        this.itemNone = 'true';
      },
      getStoredetail: function(id) {
        this.$router.push({ path: '/storedetail/' + id });
      },
      chooseArea: function(value) {
        if (value === '全部区域') {
          this.area = '全部区域';
          let stores = this.datas;
          this.storelist = [];
          for (let i in stores) {
            for (let j in stores[i]) {
              this.storelist.push(stores[i][j]);
            }
          }
        } else {
          this.area = value + '区';
          this.storelist = [];
          let stores = this.datas[value];
          for (let i in stores) {
            this.storelist.push(stores[i]);
          }
        }
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */

  .store-wrap
    width 100%
    min-height 100%
    background-color rgb(255,255,255)
    font-family PingFangSC-Regular
    position absolute
    .cover
      height 100%
      width 100%
      background-color rgba(32,32,32,0.8)
      position fixed
      top 0px
      z-index 1000

    .clearfix
      height 30px
      width 100%
      background-color rgb(255,255,255)
    .Areas
      width 100%
      z-index 1500
      top 0px
      background-color rgb(255,255,255)
      position fixed
    .ComboBox-content
      top 0px
      background-color rgb(255,255,255)
      position fixed
      width 100%
      z-index 1500
    .ComboBox
      height 40px
      border-1px($border)
      line-height 40px
      .store-icon
        float left
        margin-left 15px
        margin-top 12.5px
        bg-image('location')
        rectangle-icon(rgb(255,255,255),13px,15px)
      .area
        display inline-block
        float left
        color $theme
        font-size 16px
        margin-left 7px
      .down
        display inline-block
        icon-image('inverted')
        rectangle-icon(rgb(255,255,255),8px,5px)
        float left
        margin-top 22px
        margin-left 5px

    .area-item
      ul
        list-style none
        color rgb(207,206,206)
        font-size 16px
        background-color rgb(255,255,255)
        width 100%
      .border-none
        border none
      li
        list-style none
        width 50%
        border-1px($border)
        box-sizing border-box
        border-right 1px solid $border
        height 40px
        line-height 40px
        text-align center
        display inline
        float left
        background-color rgb(255,255,255)
        label
          display inline-block
          width 100%
        .inputa
          display none
        .inputa:checked+label
          color $se-fn
  
    .store-img
      padding 0 20px
      margin-top 10px
      img
        width 100%
        height auto   
        border 1px solid $border
        border-radius 5px
      .store-address
        width 100%
        background-color rgba(32,32,32,0.43)
        height 30px
        margin-top -33px
        margin-left 1px
        border-radius 0 0 5px 5px
        position relative
        .span-add
          max-width 157px
          line-height 30px
          font-size 13px
          margin-left 14px
          color rgb(255,255,255)
          font-family PingFangSC-Light
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .span-area
          line-height 30px
          font-size 15px
          color rgb(255,255,255)
          font-family PingFangSC-Light
          margin-right 14px
          float right
          display inline
          margin-top -30px
</style>